<template>
  <div class="box"></div>

  <div class="box2" @click=""></div>
</template>

<script setup lang='ts'>
import { ref, reactive, getCurrentInstance } from 'vue'
import { bus } from '../../Bus'
const instance = getCurrentInstance()

// 使用自定义的bus
const colorVal = ref('#009922')
bus.on('changeColor', (color: string) => {
  colorVal.value = color
})
// instance?.proxy?.$custombus.on('changeColor', (color: string) => {
//   colorVal.value = color
// })


// 使用mitt
const colorVal2 = ref('#125585')
instance?.proxy?.$bus.on('on-changeColor', (color: any) => {
  colorVal2.value = color as string
})

instance?.proxy?.$custombus.on


</script>

<style lang='scss' scoped>
.box {
  height: 100px;
  width: 100px;
  background-color: v-bind(colorVal);

}

.box2 {
  height: 100px;
  width: 100px;
  background-color: v-bind(colorVal2);

}
</style>